<template>
	<view class="container">
		<view class="content">
			<view class="list">
				
				<!-- 插槽 -->
				<slot></slot>
				
				<!-- 空状态 -->
				<view class="empty" v-if="dataList.length === 0">
					<image src="/static/imgs/empty.png" mode="aspectFit" alt="img"></image>
					<text>- {{ emptyContent }} -</text>
				</view>
				<!--加载更多-->
				<view class="loading-container" v-else>
					<uni-load-more 
						iconType="circle" 
						:status="nomore ? 'nomore' : 'loading'" 
						:content-text="{contentrefresh: '正在加载...', contentnomore: '- 到底了 -'}"
					/>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { computed, nextTick, onMounted, reactive, ref, watch } from 'vue'
import { onReachBottom } from '@dcloudio/uni-app'
import { getBalanceDetailPage } from '@/api/balance_detail.js'
import { driverBalanceTypeEnum, getDriverBalanceTypeNameByCode } from '@/utils/enums.js'

// 父组件传递值
const props = defineProps({
	dataList: {
		type: Array,
		default: () => []
	},
	pageFunction: {
		type: Function
	},
	page: {
		type: Object,
	},
	emptyContent: {
		type: String,
		default: '空空如也'
	}
})

// 事件
const emit = defineEmits(['update:dataList', 'update:page'])

// 暴露刷新页面函数
defineExpose({ resetPage })

// 子组件的值
let dataList = computed({
	get: () => props.dataList,
	set: (val) => emit('update:dataList', val)
})
let page = computed({
	get: () => props.page,
	set: (val) => emit('update:page', val)
})
const nomore = ref(false)

watch(() => props.page, (nv, ov) => {
	console.log(nv)
	nomore.value = false
	getPage()
})

function resetPage () {
	page.value.pageNum = 1
	dataList.value = []
	nomore.value = false
	getPage()
}

// 分页查询方法
function getPage () {
	if (nomore.value) {
		return
	}
	props.pageFunction(page.value).then(res => {
		// console.log(res.data)
		dataList.value = [ ...dataList.value, ...res.data.records ]
		if (page.value.pageNum < res.data.pages) {
			page.value.pageNum++
		} else {
			nomore.value = true
		}
	})
}

// 触底加载下一页
onReachBottom(() => {
	getPage()
})

// 页面挂载
onMounted(() => {
	nextTick(() => {
		getPage()
	})
	uni.$on('reload-order-list', () => { getPage() })
})

</script>

<style scoped lang="scss">

view {
	box-sizing: border-box;
}

.container {
	width: 100vw;
	height: 100%;
	background-color: #f8f8f8;
	
	.content {
		width: 100%;
		height: 100%;
		padding: 0 30rpx;
		
		.list {
			
			//
			// slot
			//
			
			.empty {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				height: 70vh;
			
				image {
					width: 500rpx;
					height: 500rpx;
					margin-bottom: 30rpx;
					opacity: 0.6;
					
				}
			
				text {
					color: #666;
					font-size: 28rpx;
				}
			}
		
			.loading-container {
				// background-color: red;
				padding: 15rpx 0;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		
		}
		
	}
	
}

</style>